<template>
	<view class="shoptab">
		<shopHead id="head" :foldState="foldState"></shopHead>
		<!-- <shopHead id="head"></shopHead> -->
		<view class="wrapper">
			<view class="infoModel">
				<view class="left">
					免费配送
				</view>
				<view class="right" @click="toMyOrder">
					<view class="icon t-icon t-icon-dingdan"></view>我的订单
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<view class="scrollLayout">
				<view class="leftScroll">
					<scroll-view scroll-y class="sContent" :scroll-top="leftValue">
						<!-- 不加key微信小程序会报错 -->
						<view class="navitem" :class="index==navIndex ? 'active' : '' " v-for="(item,index) in dataList"
							:key="item.id" @click="clickNav(index)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
				<view class="rightScroll">
					<view class="search">
						<view class="icon t-icon t-icon-youhua-1"></view>搜索
					</view>
					<!-- scroll-top:设置竖向滚动条位置 -->
					<scroll-view @scroll="rightScrollEnt" scroll-y :scroll-top="rightValue" scroll-with-animation
						class="sContent">
						<view class="product" v-for="i in dataList">
							<!-- 吸顶效果 -->
							<u-sticky :customNavHeight="0" zIndex="2">
								<view class="proTitle">{{i.name}}</view>
							</u-sticky>
							<view class="proContent">
								<view class="proItem" v-for="item in i.listProduct">
									<productItem :item="item"></productItem>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<car v-if="buyNum>0"></car>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex"
	import {
		GetStroage
	} from "@/utils/tool.js"
	import {
		getAllProduct
	} from "@/api/productClass.js"
	import {
		checkToken
	} from "@/api/user.js"
	export default {
		data() {
			return {
				navIndex: 0,
				leftValue: 0,
				rightValue: 0,
				leftHitArr: [],
				rightHitArr: [],
				foldState: false,
				dataList: null,
				msgList: {
					type: "success",
					message: "获取验证码成功"
				}
			};
		},
		async onLoad() {
			await this.getData(); //要先获取商品信息才能计算滚动高度
			this.$nextTick(() => { //要先等dom体渲染完毕
				this.getHeightArr();
			});

		},
		computed: {
			...mapGetters(["buyNum"])
		},
		methods: {
			...mapMutations(["setFoldState"]),
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			getData() {
				return new Promise((resolve, reject) => {
					getAllProduct({}).then(res => {
						console.log("请求API接口【/productClass/getAllProduct】", res);
						this.dataList = res.data;
						// console.log("商品列表:", this.dataList);
						resolve(res);
					}).catch(err => {
						reject(err);
					})
				})
			},
			clickNav(index) {
				// console.log("点击左侧", index);
				if (this.navIndex == index) return;
				this.navIndex = index;
				if (this.timeout) {
					clearTimeout(this.timeout); //取消由 setTimeout 设置的定时器
				}
				this.timeout = setTimeout(() => { //防抖处理【定时到期以后执行注册的回调函数】
					this.leftValue = this.leftHitArr[index];
					this.rightValue = this.rightHitArr[index];
				}, 100)
				// console.log(this.leftValue, "左侧高度---右侧高度", this.rightValue);

			},
			getHeightArr() {
				// console.log("获取左右侧高度");
				let selectorQuery = uni.createSelectorQuery();
				let headHeight;
				selectorQuery.select("#head").boundingClientRect(res => {
					headHeight = res.height;
				}).exec(); //必须要结束
				//左侧高度组
				selectorQuery.selectAll(".navitem").boundingClientRect(res => {
					this.leftHitArr = res.map(item => item.top - headHeight - 30) //30是infoModel的高度45-圆角15
				}).exec(); //必须要结束
				// console.log("左侧高度数组", this.leftHitArr);
				//右侧高度组【boundingClientRect目标节点布局区域的边界,包含left、right、top、bottom 四项】
				selectorQuery.selectAll(".product").boundingClientRect(res => {
					this.rightHitArr = res.map(item => item.top - headHeight - 30)
				}).exec(); //必须要结束
				// console.log("右侧高度数组", this.rightHitArr);
			},
			//监听右侧滚动条的改变
			rightScrollEnt(e) {
				// console.log(e);
				let scrollTop = Math.ceil(e.detail.scrollTop); //实时获取
				//value是rightHitArr数组里面的值,rightHitArr是rightHitArr的索引,arr是rightHitArr别称
				let idx = this.rightHitArr.findIndex((value, index, arr) => scrollTop >= value && scrollTop < arr[index +
					1]); //findIndex()找到满足条件的一个，立即返回其索引
				this.navIndex = idx;
				this.leftValue = this.leftHitArr[idx];
				if (scrollTop < 200) {
					// this.foldState = false;
					this.setFoldState(false)
				}
				if (scrollTop > 300) {
					// this.foldState = true;
					this.setFoldState(true)
				}
			},
			async toMyOrder() {
				let token = GetStroage("token");
				if (token) {
					checkToken({
						Token: token
					}).then(res => {
						console.log("请求API接口【/user/checkToken】", res);
						if (res.data.result == false) {
							this.fillMsg("error", "身份过期/异常，请重新登录！");
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.navigateTo({
								url: "../../pages_shop/order/order"
							})
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	.shoptab {
		height: 95vh; //【有tarba就不设置全屏高度了】vh是css中的一个相对长度单位,是相对于视窗的高度
		display: flex;
		flex-direction: column;

		.wrapper {
			flex: 1; // 高度/宽度自适应
			// background: #ffffff;
			border-radius: 15px 15px 0 0;
			// transform: translateY(-30rpx);
			z-index: 2;
			overflow: hidden;

			margin-top: -15px; //rpx和px是2倍的转换
			position: relative;

			.infoModel {
				@include flex-box-set(between, center);
				height: 45px; //
				background: #ffffff;
				padding: 0 30rpx;
				font-size: 30rpx;
				border-bottom: 1rpx solid $brand-theme-color; //品牌色

				.right {
					@include flex-box(); //引用uni.scss
				}
			}

			.scrollLayout {
				background-color: $page-bg-color; //页面背景色
				height: calc(100% - 90rpx); //给它设置100%会继承父级【记得要有空格！】
				// height: 200rpx;
				@include flex-box();

				.leftScroll {
					height: 100%;
					width: 190rpx;
					border-right: 1rpx solid $brand-theme-color;
					background: $page-bg-color;

					.navitem {
						padding-left: 30rpx;
						font-size: 30rpx;
						line-height: 90rpx; //控制行与行之间的垂直距离
						position: relative; //相对它所属父元素来进行偏移的

						&.active {
							//伪类
							color: #333;
							background: #ffffff;
							font-weight: bold;
							font-size: 40rpx;
							border-radius: 0 100rpx 100rpx 0;

							&::before {
								//伪元素
								content: ""; //可追加内容
								width: 10rpx;
								height: 50rpx;
								border-radius: 25%;
								background: $brand-theme-color;
								position: absolute; //子绝父相,参照物是父元素
								left: 0;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
				}

				.rightScroll {
					height: 100%; //基于包含它的块对象的百分比高度
					flex: 1;
					position: relative; //作为参考值
					background: #ffffff;

					.search {
						position: absolute; //脱理文档流
						top: 0;
						right: 30rpx;
						z-index: 3;
						@include flex-box-set();
						height: 90rpx;
					}

					.product {
						padding: 0 30rpx;

						.proTitle {
							line-height: 90rpx;
							font-size: 40rpx;
							font-family: "微软雅黑";
							font-weight: bold;
							background: #ffffff;
						}

						.proContent {
							.proItem {}
						}
					}
				}

				.sContent {
					height: 100%; //绝了这个【只要scroll-view及父级标签高度都为屏幕高度即出现滚动】
				}
			}
		}
	}
</style>
